<template>
  <div class="easy-container border-bottom container-fluid">
    <el-checkbox v-model="onlyUnread" border size="small">仅查看未读消息</el-checkbox>
    <el-button size="small" class="m-l-16" @click="$emit('setCurrentPageRead')">当前页标记为已读</el-button>
  </div>
</template>

<script>
export default {
  name: 'NotesListControls', // 消息列表
  data() {
    const read = this.$route.query.read;
    return {
      onlyUnread: !read || read === 'unread',
    };
  },
  watch: {
    onlyUnread(val) {
      if (val) this.$root.$emit('addQuery', { read: undefined });
      else this.$root.$emit('addQuery', { read: 'all' });
    },
  },
};
</script>

<style></style>
